<template>
  <div class="send-user">
    <a-input
      style="width: 40%"
      v-model="mobile"
      placeholder="请填写手机号"
    />
    <a-button type="primary" style="margin-left: 15px;" @click="handleAddMember">确认添加</a-button>
    <a-upload
      accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
      name="发券"
      :showUploadList="false"
      :multiple="false"
      :data="uploadData"
      :action="uploadUrl"
      @change="handleChange"
    >
      <a-button style="margin-left: 15px;">批量添加</a-button>
    </a-upload>
    <div v-if="sendType == 2">当前共添加成功{{totalUser}}个手机号<span
      style="margin-left: 5px;text-decoration: underline;color: blue;cursor: pointer" @click="handleExportSendUser">点击下载导入模版</span>
    </div>
    <div v-if="sendType == 1">当前共添加成功{{totalUser}}个用户，其中{{totalNoSub}}个未关注任何公众号；共{{totalNoCard}}个用户未开卡。 <span
      style="margin-left: 5px;text-decoration: underline;color: blue;cursor: pointer" @click="handleExportSendUser">点击下载导入模版</span>
    </div>
    <a-table :pagination="pagination" :columns="memberColumns" :data-source="sendUserList"
             :rowKey="(record, index) => index" size="middle" @change="handleSendUserChange">
            <span slot="index" slot-scope="text, record, index">
              {{index+1}}
            </span>
      <span slot="userStatus" slot-scope="text, record, index">
<!--              -2未关注-1未开卡0正常-->
              <span v-if="record.userStatus == -1" style="color: red;">未开卡</span>
              <span v-if="record.userStatus == -2" style="color: red;">未关注</span>
              <span v-if="record.userStatus == 0">可正常发券</span>
            </span>
      <span slot="action" slot-scope="text, record, index">
              <a-popconfirm title="请确认是否删除本条信息？" @confirm="handleDeleteMember(record.mobile)">
                <a-icon type="delete" style="cursor: pointer;"/>
              </a-popconfirm>
            </span>
    </a-table>
  </div>
</template>
<script>
  import {
    sendUserList,
    addSendUser,
    deleteSendUser,
    sendUserExpert,
    sendUserBatchAdd
  } from '@/api/headquartersCoupon/index'

  const memberColumns = [
    {
      title: '序号',
      width: 1,
      align: 'center',
      scopedSlots: { customRender: 'index' }
    },
    {
      title: '发放对象',
      width: 4,
      align: 'center',
      dataIndex: 'mobile'
    },
    {
      title: '状态',
      width: 3,
      align: 'center',
      scopedSlots: { customRender: 'userStatus' }
    },
    {
      title: '操作',
      width: 1,
      align: 'center',
      scopedSlots: { customRender: 'action' }
    }
  ]
  export default {
    props: {
      id: {
        type: String,
        default: ''
      },
      sendType: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          showTotal: total => `共有 ${total} 条数据`
        },
        memberColumns,
        sendUserList: [],
        mobile: '',
        uploadData: {
          pageId: this.$route.params.id
        },
        exportUrl: sendUserExpert,
        uploadUrl: sendUserBatchAdd,
        totalUser: '',
        totalNoSub: '',
        totalNoCard: '',
        a: 90
      }
    },
    computed: {},
    created() {
      this.getSendUserList()
      // this.$message.success('共成功导入100条数据！')
      
    },
    methods: {

      //检测是否添加发放对象
      checkSendUser() {
        if (this.totalUser > 0) {
          return true
        } else {
          return false
        }
      },

      //检测是否有未开卡
      checkCard(totalNoCard) {
        return (this.totalUser > 0 && totalNoCard > 0)
      },

      //检测是否有未关注
      checkFollow(totalNoSub) {
        return (this.totalUser > 0 && totalNoSub > 0)
      },

      // 批量添加发放对象
      handleChange(info) {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList)
        }
        if (info.file.status === 'done') {
          const {msg, message, code, data} = info.file.response
          if (code == 200 ) {
            this.refreshSendUserList()
            this.$confirm({
              closable: true,
              content: h => <div><p style="word-break: break-all;">{data}</p></div>,
              icon: 'none'
            })
          } else {
            this.$message.error(msg || message)
          }
        } else if (info.file.status === 'error') {
          this.$message.error(`${info.file.name} file upload failed.`)
        }
      },

      // 单独添加发放对象
      handleAddMember() {
        var myreg = /^(1)\d{10}$/
        if (!myreg.test(this.mobile)) {
          this.$message.info('手机号有误！')
          return false
        }
        const data = {
          pageId: this.id,
          tel: this.mobile
        }
        addSendUser(data).then(res => {
          this.spinning = false
          if (res.code === 200) {
            this.mobile = ''
            this.refreshSendUserList()
          } else {
            this.$message.error(res.msg || res.message)
          }
        }).catch(err => {
          this.spinning = false
        })
      },

      // 删除发放对象
      handleDeleteMember(mobile) {
        const data = {
          pageId: this.id,
          tel: mobile
        }
        deleteSendUser(data).then(res => {
          this.spinning = false
          if (res.code === 200) {
            this.refreshSendUserList()
          } else {
            this.$message.error(res.msg || res.message)
          }
        }).catch(err => {
          this.spinning = false
        })
      },

      // 分页
      handleSendUserChange(pagination) {
        const pager = { ...this.pagination }
        pager.current = pagination.current
        this.pagination = pager
        this.getSendUserList()
      },

      refreshSendUserList() {
        this.pagination.current = 1
        this.getSendUserList()
      },

      //发券对象列表
      getSendUserList() {
        const data = {
          pageId: this.id,
          current: this.pagination.current,
          size: this.pagination.pageSize
        }
        sendUserList(data).then(res => {
          if (res.code === 200) {
            const { officeSendUsers, totalUser, totalNoSub, totalNoCard } = res.data
            this.sendUserList = officeSendUsers.records
            const pagination = { ...this.pagination }
            pagination.total = officeSendUsers.total
            this.pagination = pagination
            this.totalNoCard = totalNoCard
            this.totalNoSub = totalNoSub
            this.totalUser = totalUser
            this.$emit('checkCard', this.checkCard(totalNoCard))
            this.$emit('checkFollow', this.checkFollow(totalNoSub))
          } else {
            this.$message.error(res.msg || res.message)
          }
        })
      },

      //下载导入模板
      handleExportSendUser() {
        window.location.href = this.exportUrl
      }
    }
  }
</script>
<style lang="less" scoped>

</style>
